<template>
<!--  公话-充值管理- 学生卡充值 -->
  <div class="student_card_recharge">
    <div class="recharge_tip">
      <div class="recharge_tip_mian">
        <div>平台卡注意事项：</div>
        <div>1.已冻结的卡不能进行充值;</div>
        <div>2.建议充值前,先进行查询并确认信息后再进行充值;</div>
      </div>
    </div>
    <div class="main_content">
      <el-form
        :inline="true"
        :model="elform"
        class="demo-form-inline"
        size="mini"
      >
        <el-form-item label="班级名称:" >
          <el-select
            v-model="departmentGuid"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="item in departmentoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:" >
          <el-input
            v-model="userName"
            placeholder="请输入姓名"
            size="mini"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="studentlist"
        style="width: 100%"
        border="border"
        class="tablebox"
        highlight-current-row
        :header-cell-style="headFirst"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <!-- <el-table-column
                  prop="unitName"
                  label="学校">
                </el-table-column> -->
        <el-table-column prop="departmentName" width="100%" label="班级">
        </el-table-column>
        <el-table-column prop="userName" label="学生姓名"> </el-table-column>
        <el-table-column prop="cardNumber" width="110%" label="卡号">
        </el-table-column>
        <el-table-column prop="platformBalance" label="平台钱包">
          <template slot-scope="scope">
            <div>{{ scope.row.platformBalance | amountyuan }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="loginName" label="登录名"> </el-table-column>
        <el-table-column prop="userNumber" label="学生号"> </el-table-column>
        <el-table-column prop="idCard" width="150%" label="身份证号">
        </el-table-column>
        <el-table-column label="操作" width="140%">
          <template slot-scope="scope">
            <el-button
              plain
              title="充值"
              type="primary"
              size="mini"
              @click="topup(scope.row)"
              >充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChangepage"
          @current-change="handleCurrentChangepage"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordCount"
        >
        </el-pagination>
      </div>
      <!-- 学生充值 -->

      <el-dialog
        width="500px"
        custom-class="customWidth"
        center
        :before-close="closeDialog"
        title="学生充值"
        :close-on-click-modal="false"
        :visible.sync="topupDialogFormVisible"
      >
        <el-form :model="eidtfromdata" ref="eidtRef" label-width="80px">
          <el-form-item label="学生姓名" prop="userName">
            <el-col :span="15">
              <el-input
                v-model="eidtfromdata.userName"
                autocomplete="off"
                disabled
                size="mini"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-col :span="15">
              <el-input
                v-model="eidtfromdata.idCard"
                autocomplete="off"
                disabled
                size="mini"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="卡号" prop="cardNumber">
            <el-col :span="15">
              <el-input
                v-model="eidtfromdata.cardNumber"
                autocomplete="off"
                disabled
                size="mini"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="平台钱包" prop="platformBalance">
            <el-col :span="15">
              <el-input
                v-model="eidtfromdata.platformBalance"
                autocomplete="off"
                disabled
                size="mini"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="充值金额" prop="rechargeVlaue">
            <el-col :span="15">
              <el-input-number
                v-model="eidtfromdata.rechargeVlaue"
                :min="0"
                :step="100"
                size="mini"
                label="金额数量"
              ></el-input-number>
              <span class="fl_tip" style="color: red">(元)</span>
            </el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eidtvisible()">取消</el-button>
          <el-button type="primary" @click="eidtataFormSubmit()"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      departmentGuid: "",
      departmentoptions: [],
      dataListLoading: false,
      topupDialogFormVisible: false,
      eidtfromdata: {
        userName: "",
        idCard: "",
        cardNumber: "",
        rechargeVlaue: "",
      },
      messageType: 0,
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      //代理商id
      agentGuid: "",
      //学校id
      schoolid: "",
      //学生姓名
      userName: "",
      //学校列表
      schooloptions: [],
      //管理员id
      userGuid: "",
      //学生列表
      studentlist: [],
      //权限验证
      identity: "",
      searchInfo: {},
    };
  },
  mounted() {
    this.departmentselectlist();
  },
  created() {
    this.userGuid = sessionStorage.getItem("administrator");
    this.searchInfo.unitGuid = this.changeschoolid;
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      },
    },
  },
  methods: {
    //部门选择
    departmentselectlist() {
      this.departmentoptions = [];
      this.$http({
        url: this.$http.adornUrl("/department/query-department-info"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data);
          let Arr = data.messageContent;
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName,
            };
            this.departmentoptions.push(itemobj);
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    onSubmit() {
      this.pageNum = 1;
      if (this.userName != null && this.userName != "") {
        this.searchInfo.userName = this.userName;
      }
      if (this.departmentGuid != null && this.departmentGuid != "") {
        this.searchInfo.departmentGuid = this.departmentGuid;
      }

      this.adminstudentinit();
    },
    adminstudentinit() {
      this.searchInfo.unitGuid = this.changeschoolid;
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/voip/manager/student-info-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo,
          },
          messageType: this.messageType,
        }),
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.studentlist = data.messageContent.data;
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
          this.dataListLoading = false;
          this.searchInfo = {};
        }
      });
    },
    handleSizeChangepage(val) {
      this.pageSize = val;
      this.adminstudentinit();
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
      this.adminstudentinit();
    },
    topup(row) {
      this.topupDialogFormVisible = true;
      this.eidtfromdata.userName = row.userName;
      this.eidtfromdata.idCard = row.idCard;
      this.eidtfromdata.cardNumber = row.cardNumber;
      this.eidtfromdata.userGuid = row.userGuid;
      this.eidtfromdata.platformBalance = this.amountyua(row.platformBalance);
    },
    closeDialog(done) {
      done();
    },
    eidtvisible() {
      this.topupDialogFormVisible = false;
      this.$refs["eidtRef"].resetFields();
    },
    eidtataFormSubmit() {
      if (
        this.eidtfromdata.rechargeVlaue == 0 ||
        this.eidtfromdata.rechargeVlaue == undefined
      ) {
        this.$message({
          message: "请选择正确金额",
          type: "warning",
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("/voip/recharge/agent-recharge"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            operatorGuid: this.userGuid,
            rechargeVlaue: this.eidtfromdata.rechargeVlaue * 100,
            userGuid: this.eidtfromdata.userGuid,
          },
          messageType: this.messageType,
        }),
      }).then(({ data }) => {
        // console.log(data)
        if (data.messageCode == 200) {
          this.$message({
            message: "充值成功",
            type: "success",
          });
          this.topupDialogFormVisible = false;
          this.$refs["eidtRef"].resetFields();
          this.adminstudentinit();
        }
        if (data.messageCode == 500) {
          this.$message.error(data.errorMessage);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.student_card_recharge {
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  // padding: 20px;
  .demo-form-inline,
  .demo-form-inline1 {
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 250px;
    }
  }
  .recharge_tip {
    .recharge_tip_mian {
      background-color: #f5f5f5;
      padding-left: 20px;
      padding-top: 10px;
      > div {
        height: 30px;
      }
    }
  }
  .main_content {
    padding: 10px;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>